<template>
  <!-- 1、创建一个Tabber组件 -->
  <div class="tabber-box">
    <div class="tabber-flex">
      <TabberItem 
      v-for="(item,index) in tabberItems"
      :key="index"
      :item="item"
      :index="index"
      :selectIndex="selectIndex"
      @changeSelectIndex = "changeSelectIndex"
      />
    </div>
  </div>
</template>

<script>
//引入图标文字组件并注册
import TabberItem from "./TabberItem";
export default {
  components: {
    TabberItem,
  },
  props: {
    //对传过来的数据进行数据类型的验证
    items: {
      type: Array,
      required: true,
      validator: function (value) {
        return value.length <= 6;
      },
    },
    defaultSelectIndex:{
        type:Number,
        default:0
    }
  },
  data(){
      return{
          tabberItems:this.items,
          selectIndex:this.defaultSelectIndex
      }
  },
  methods:{
      changeSelectIndex(index){
          console.log(index)
          this.selectIndex = index
      }
  }
};
</script>

<style scoped>
/* 设置底部大盒子的样式 */
.tabber-box {
  width: 100%;
  height: 64px;
  border-top: 1px solid lightgray;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
}
.tabber-flex {
  display: flex;
  justify-content: space-around;
}
</style>